<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

    <!--toastr-->
    <link href="../css/plugins/toastr/toastr.min.css" rel="stylesheet"/>

    <!--common.css-->
    <link href="../css/common.css" rel="stylesheet" type="text/css">

    <!--自定义css-->
    <style type="text/css">
        .bar {
            height: 18px;
            background: green;
        }

        .my-file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .my-file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .my-file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
</head>

<body>
<div class="wrapper wrapper-content content-margin">

    <div>
        <a href="javascript:void(0);" class="my-file">选择文件
            <input type="file" id="fileupload" type="file" name="files" multiple>
        </a>
    </div>


    <div>
        <button id="upload">
            upload
        </button>
    </div>
</div>

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

<!-- 全局js -->
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>

<!--toastr-->
<script src="../js/plugins/toastr/toastr.min.js"></script>

<!--文件上传-->
<script src="../js/plugins/jQuery-File-Upload/vendor/jquery.ui.widget.js"></script>
<script src="../js/plugins/jQuery-File-Upload/jquery.iframe-transport.js"></script>
<script src="../js/plugins/jQuery-File-Upload/jquery.fileupload.js"></script>

<!--uuid.js-->
<script src="../js/plugins/uuid/Math.uuid.js"></script>

<!--common.js-->
<script src="../js/common.js"></script>

<!-- 自定义js -->
<script type="text/javascript">
    /*https://www.jq22.com/jquery-info230*/
    $(function () {
        // $('#fileupload').fileupload({
        //     url: '/attach/upload',
        //     dataType: 'json',
        //     sequentialUploads: true,
        //     done: function (e, data) {
        //         $.each(data.result.files, function (index, file) {
        //             $('<p/>').text(file.name).appendTo(document.body);
        //         });
        //     }
        // });

        // $(function () {
        //     $('#fileupload').fileupload({
        //         url: '/attach/upload',
        //         dataType: 'json',
        //         //添加文件回调函数
        //         add: function (e, data) {
        //             data.context = $('<button/>').text('Upload')
        //                 .appendTo(document.body)
        //                 .click(function () {
        //                     $(this).replaceWith($('<p/>').text('Uploading...'));
        //                     //上传
        //                     data.submit();
        //                 });
        //         },
        //         //上传成功回调函数
        //         done: function (e, data) {
        //             data.context.text('Upload finished.');
        //         }
        //     });
        // });

        let filesList = [];
        //获取文件
        $('#fileupload').change(function () {
            let files = $(this).prop('files');
            for (var i = 0; i < files.length; i++) {
                let file = files[i];
                filesList.push(file);
            }
        });

        $('#upload').click(function () {
            //初始化
            $('#fileupload').fileupload();
            let jqXHR = $('#fileupload').fileupload('send',
                {
                    files: filesList,
                    url: '/attach/upload',
                    sequentialUploads: true,
                    progressall: function (e, data) {
                        var progress = parseInt(data.loaded / data.total * 100, 10);
                        $('#progress .bar').css(
                            'width',
                            progress + '%'
                        );
                    }
                })
                .success(function (result, textStatus, jqXHR) {
                    console.log('success');
                })
                .error(function (jqXHR, textStatus, errorThrown) {
                    console.log('error');
                })
                .complete(function (result, textStatus, jqXHR) {
                    console.log('complete');
                });

            //销毁
            $('#fileupload').fileupload('destroy');

            console.log('uuid:' + Math.uuid().toLowerCase().replace(new RegExp("-", "g"), ""));
        });

    });
</script>

</body>


</html>
